<template>
  <div class="top-bar">
    <div class="illegal-message-wrap">
      <div :class="option.newDiscovery?'grid-content row-bg':'grid-content'" @click="handlePick('newDiscovery')">新发现</div>
      <div :class="option.toVerify?'grid-content row-bg':'grid-content'" @click="handlePick('toVerify')">待核实</div>
      <div :class="option.calcConfirmed?'grid-content row-bg':'grid-content'" @click="handlePick('calcConfirmed')">已确认</div>
      <div :class="option.processed?'grid-content row-bg':'grid-content'" @click="handlePick('processed')">已处理</div>
      <div :class="option.pseudoChange?'grid-content row-bg':'grid-content'" @click="handlePick('pseudoChange')">伪变化</div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        panorama: false
      }
    },
    methods: {
      handlePanorama() {
        // this.handlePick('panorama')
        console.log(this.option)
      },
      handlePick(key) {
        const status = !this.option[key]
        this.$emit('handlePick', key, status)
      }
    },
    props: {
      option: {
        type: Object,
        default: () => {}
      }
    }
  }
</script>
<style lang="less">
  .top-bar {
    // position: absolute;
    // z-index: 99;
    // top: 20px;
    // left: 20px;

    .illegal-message-wrap {
      position: absolute;
      z-index: 99;
      top: 20px;
      left: 20px;
      padding: 10px;
      background: #4a4a4a;
      border-radius: 4px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.26);
      color: #fff;

      display: flex;

      .grid-content {
        cursor: pointer;
        border-radius: 4px;
        min-height: 36px;
        line-height: 2.5;
        min-width: 50px;
        padding: 0 10px;
        margin: 0 8px;
        user-select: none;
      }

      & .row-bg {
        background-color: #2a2a2a;
      }
    }

  }
</style>